<template>
  <div v-if="visible" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <!-- Header -->
      <div class="modal-header">
        <div class="header-content">
          <h3>购买门票</h3>
          <p class="header-subtitle">选择您心仪的座位和票价</p>
        </div>
        <button class="close-btn" @click="closeModal">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      
      <div class="modal-body">
        <!-- Event Card -->
        <div class="event-card">
          <div class="event-image">
            <img :src="event.image" :alt="event.title">
            <div class="event-badge">热门</div>
          </div>
          <div class="event-details">
            <h4>{{ event.title }}</h4>
            <div class="event-meta">
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ event.venue }}</span>
              </div>
              <div class="meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                  <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/>
                  <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/>
                  <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span>{{ formatDate(event.date) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Steps -->
        <div class="purchase-steps">
          <div v-for="(step, index) in steps" :key="index" 
               :class="['step', { active: currentStep >= index + 1, completed: currentStep > index + 1 }]">
            <div class="step-number">{{ index + 1 }}</div>
            <span>{{ step }}</span>
          </div>
        </div>

        <!-- Step 1: Ticket Selection -->
        <div v-if="currentStep === 1" class="section">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            选择票价类型
          </h4>
          <div class="ticket-types">
            <div v-for="ticket in ticketTypes" :key="ticket.id"
                 :class="['ticket-type', { active: selectedTicket?.id === ticket.id, unavailable: ticket.available === 0 }]"
                 @click="selectTicket(ticket)">
              <div class="ticket-header">
                <span class="ticket-name">{{ ticket.name }}</span>
                <div class="ticket-price">
                  <span class="price-symbol">¥</span>
                  <span class="price-amount">{{ ticket.price }}</span>
                </div>
              </div>
              <div class="ticket-features">
                <span v-if="ticket.name.includes('VIP')" class="feature">🎭 VIP专享</span>
                <span v-if="ticket.name.includes('前排')" class="feature">👀 最佳视野</span>
                <span v-if="ticket.name.includes('普通')" class="feature">💰 超值选择</span>
              </div>
              <div class="ticket-availability">
                <div class="availability-bar">
                  <div class="availability-fill" :style="{ width: `${(ticket.available / (ticket.available + 50)) * 100}%` }"></div>
                </div>
                <span class="availability-text">{{ ticket.available > 0 ? `剩余 ${ticket.available} 张` : '已售罄' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 2: Seat Selection -->
        <div v-if="currentStep === 2 && selectedTicket" class="section">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M19 9V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6V9M19 9H5M19 9V19C19 19.5523 18.5523 20 18 20H6C5.44772 20 5 19.5523 5 19V9" stroke="currentColor" stroke-width="2"/>
            </svg>
            选择座位区域
          </h4>
          <div class="seat-selection">
            <div class="theater-layout">
              <div class="stage">舞台</div>
              <div class="seat-areas">
                <div v-for="area in seatAreas" :key="area.id"
                     :class="['seat-area', { active: selectedSeatArea?.id === area.id, unavailable: !area.available || selectedTicket?.ticketType !== area.ticketType }]"
                     @click="selectSeatArea(area)">
                  <div class="area-name">{{ area.name }}</div>
                  <div class="area-price">¥{{ area.price }}</div>
                  <div class="area-seats">剩余{{ area.availableSeats }}座</div>
                </div>
              </div>
            </div>
            <div v-if="selectedSeatArea" class="quantity-selector">
              <label>选择数量：</label>
              <div class="quantity-controls">
                <button @click="decreaseQuantity" :disabled="quantity <= 1">-</button>
                <span class="quantity-display">{{ quantity }}</span>
                <button @click="increaseQuantity" :disabled="quantity >= Math.min(selectedSeatArea.availableSeats, 6)">+</button>
              </div>
              <p class="quantity-note">每次最多购买6张票</p>
            </div>
          </div>
        </div>

        <!-- Step 3: Order Summary -->
        <div v-if="currentStep === 3 && selectedTicket && selectedSeatArea" class="section">
          <h4 class="section-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            确认订单信息
          </h4>
          <div class="order-summary">
            <div v-for="item in orderSummaryItems" :key="item.label" class="summary-item">
              <span class="item-label">{{ item.label }}</span>
              <span class="item-value">{{ item.value }}</span>
            </div>
            <div class="summary-divider"></div>
            <div class="summary-total">
              <span class="total-label">总计金额</span>
              <span class="total-amount">¥{{ totalPrice }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="modal-footer">
        <div class="footer-actions">
          <button v-if="currentStep > 1" class="btn btn-outline" @click="previousStep">上一步</button>
          <button v-if="currentStep < 3" class="btn btn-primary" @click="nextStep" :disabled="!canProceedToNextStep">下一步</button>
          <template v-else>
            <button class="btn btn-outline" @click="addToCart" :disabled="!canPurchase">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <circle cx="9" cy="21" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="20" cy="21" r="1" stroke="currentColor" stroke-width="2"/>
                <path d="M1 1H5L7.68 14.39C7.77 14.78 8.08 15 8.5 15H19.5C19.92 15 20.23 14.78 20.32 14.39L23 6H6" stroke="currentColor" stroke-width="2"/>
              </svg>
              加入购物车
            </button>
            <button class="btn btn-primary" @click="buyNow" :disabled="!canPurchase">立即购买</button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { useUserStore } from '@/stores/user'
import { apiClient } from '@/api/client'

const props = defineProps({
  visible: { type: Boolean, default: false },
  event: { type: Object, required: true },
  ticketTypes: { type: Array, default: () => [] },
  // 新增：支持从外部预选票价并指定初始步骤
  initialTicket: { type: Object, default: null },
  initialStep: { type: Number, default: 1 }
})

const emit = defineEmits(['close', 'purchase-success'])
const router = useRouter()
const cartStore = useCartStore()
const userStore = useUserStore()

// State
const currentStep = ref(1)
const selectedTicket = ref(null)
const selectedSeatArea = ref(null)
const quantity = ref(1)

// Constants
const steps = ['选择票价', '选择座位', '确认订单']
const seatAreas = ref([
  { id: 1, name: 'VIP区域', ticketType: 'VIP', price: 880, availableSeats: 20, available: true },
  { id: 2, name: '前排中央', ticketType: 'STANDARD', price: 680, availableSeats: 35, available: true },
  { id: 3, name: '前排两侧', ticketType: 'STANDARD', price: 680, availableSeats: 28, available: true },
  { id: 4, name: '中排中央', ticketType: 'STANDARD', price: 480, availableSeats: 45, available: true },
  { id: 5, name: '中排两侧', ticketType: 'STANDARD', price: 480, availableSeats: 38, available: true },
  { id: 6, name: '后排区域', ticketType: 'STANDARD', price: 480, availableSeats: 52, available: true }
])

// Computed
const totalPrice = computed(() => selectedSeatArea.value ? selectedSeatArea.value.price * quantity.value : 0)
const canProceedToNextStep = computed(() => {
  if (currentStep.value === 1) return selectedTicket.value !== null
  if (currentStep.value === 2) return selectedSeatArea.value !== null && quantity.value > 0
  return false
})
const canPurchase = computed(() => selectedTicket.value && selectedSeatArea.value && quantity.value > 0)
const orderSummaryItems = computed(() => [
  { label: '演出名称', value: props.event.title },
  { label: '票价类型', value: selectedTicket.value?.name },
  { label: '座位区域', value: selectedSeatArea.value?.name },
  { label: '购买数量', value: `${quantity.value} 张` }
])

// Methods
const selectTicket = (ticket) => {
  if (ticket.available === 0) return
  selectedTicket.value = ticket
  selectedSeatArea.value = null
  quantity.value = 1
  if (currentStep.value === 1) setTimeout(() => currentStep.value = 2, 300)
}

const selectSeatArea = (area) => {
  // 仅允许选择与当前票价类型匹配的座位区域
  if (!area.available || selectedTicket.value?.ticketType !== area.ticketType) return
  selectedSeatArea.value = area
  // 不自动跳转到下一步，留给用户在当前步骤调整数量
}

const nextStep = () => { if (canProceedToNextStep.value && currentStep.value < 3) currentStep.value++ }
const previousStep = () => { if (currentStep.value > 1) currentStep.value-- }

const increaseQuantity = () => {
  const maxQuantity = selectedSeatArea.value ? Math.min(selectedSeatArea.value.availableSeats, 6) : 6
  if (quantity.value < maxQuantity) quantity.value++
}
const decreaseQuantity = () => { if (quantity.value > 1) quantity.value-- }

// 当弹窗打开时，根据外部传入的初始票价与步骤进行初始化
watch(() => props.visible, (vis) => {
  if (!vis) return
  // 预选票价：如果传入对象，优先以 id 匹配到当前 ticketTypes 中的项
  if (props.initialTicket) {
    const byId = props.initialTicket.id
      ? props.ticketTypes.find(t => t.id === props.initialTicket.id)
      : null
    selectedTicket.value = byId || props.initialTicket
    // 打开即进入选座步骤
    currentStep.value = 2
  } else {
    currentStep.value = props.initialStep || 1
  }
  // 打开时重置座位与数量
  selectedSeatArea.value = null
  quantity.value = 1
})

// 监听外部初始票价变化（例如在详情页切换票价后再次打开）
watch(() => props.initialTicket, (t) => {
  if (!props.visible) return
  if (t) {
    const byId = t.id ? props.ticketTypes.find(x => x.id === t.id) : null
    selectedTicket.value = byId || t
    currentStep.value = 2
    selectedSeatArea.value = null
    quantity.value = 1
  }
})

const closeModal = () => {
  selectedTicket.value = null
  selectedSeatArea.value = null
  quantity.value = 1
  currentStep.value = 1
  emit('close')
}

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })
}

const addToCart = () => {
  if (!canPurchase.value) return
  const seats = generateSeatNumbers(selectedSeatArea.value.name, quantity.value)
  const cartItem = {
    id: Date.now(),
    eventId: props.event.id,
    eventTitle: props.event.title,
    venue: props.event.venue,
    date: props.event.date,
    image: props.event.image,
    // 存储基础票价类型（如 VIP票/普通票），而非展示名称
    ticketType: selectedTicket.value.ticketType,
    seatArea: selectedSeatArea.value.name,
    seats: seats,
    price: selectedSeatArea.value.price,
    quantity: quantity.value,
    total: totalPrice.value
  }
  cartStore.addItem(cartItem)
  showMessage('已加入购物车！', 'success')
  closeModal()
}

const buyNow = async () => {
  // 若未登录或无令牌，跳转登录
  const hasToken = !!(sessionStorage.getItem('token') || localStorage.getItem('token'))
  if (!userStore.isLoggedIn && !hasToken) {
    showMessage('请先登录后再下单', 'error')
    const redirect = router.currentRoute.value.fullPath || '/'
    router.push({ path: '/login', query: { redirect } })
    closeModal()
    return
  }
  // 若缺少用户ID，尝试拉取个人资料
  if (!userStore?.user?.id) {
    try { await userStore.fetchProfile() } catch (_) {}
  }
  if (!userStore?.user?.id) {
    showMessage('登录状态异常，请重新登录', 'error')
    const redirect = router.currentRoute.value.fullPath || '/'
    router.push({ path: '/login', query: { redirect } })
    closeModal()
    return
  }
  if (!canPurchase.value) {
    showMessage('请完成所有选择步骤', 'error')
    return
  }
  try {
    // 拉取可售票列表并按票型分配唯一票ID
    const ticketsResp = await apiClient.get(`/api/events/${props.event.id}/tickets?status=1`)
    const allTickets = ticketsResp?.data || []
    const candidates = allTickets
      .filter(t => t.ticketType === selectedTicket.value.ticketType)
      .map(t => t.id)

    // 先确保包含当前选择的票ID，再补足到所需数量
    const uniqueIds = new Set()
    uniqueIds.add(selectedTicket.value.id)
    for (const id of candidates) {
      if (uniqueIds.size >= quantity.value) break
      uniqueIds.add(id)
    }

    const ticketIds = Array.from(uniqueIds)
    if (ticketIds.length < quantity.value) {
      showMessage('库存不足，请减少数量或更换票型', 'error')
      return
    }

    const body = {
      userId: userStore.user.id,
      eventId: props.event.id,
      ticketIds,
      contactName: userStore.user.realName || userStore.user.username || '用户',
      contactPhone: userStore.user.phone || '13900000000',
      contactEmail: userStore.user.email || 'user@example.com',
      paymentMethod: ''
    }
    const resp = await apiClient.post('/api/orders', body)
    const data = resp?.data ?? resp
    if (data?.orderNo) {
      showMessage(`下单成功，订单号：${data.orderNo}`, 'success')
      emit('purchase-success', data)
      closeModal()
      router.push('/orders')
    }
  } catch (err) {
    showMessage(`下单失败：${err.message}`, 'error')
  }
}

const generateSeatNumbers = (areaName, count) => {
  const seats = []
  const startRow = areaName.includes('VIP') ? 1 : areaName.includes('前排') ? 3 : areaName.includes('中排') ? 8 : 15
  const startSeat = Math.floor(Math.random() * 10) + 1
  for (let i = 0; i < count; i++) {
    const row = startRow + Math.floor(i / 10)
    const seat = startSeat + (i % 10)
    seats.push(`${row}排${seat}座`)
  }
  return seats
}

const showMessage = (message, type = 'success') => {
  const notification = document.createElement('div')
  notification.textContent = message
  notification.className = `notification ${type}`
  document.body.appendChild(notification)
  setTimeout(() => document.body.removeChild(notification), 3000)
}

watch(() => props.visible, (newVal) => {
  if (!newVal) {
    selectedTicket.value = null
    selectedSeatArea.value = null
    quantity.value = 1
    currentStep.value = 1
  }
})
</script>

<style scoped>
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --success-color: #4caf50;
  --error-color: #f44336;
  --border-color: #e0e0e0;
  --text-primary: #212121;
  --text-secondary: #757575;
  --border-radius: 8px;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
  padding: 72px 0; /* 增加顶部留空，避免贴边 */
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-heavy);
  animation: slideUp 0.4s ease-out;
  display: flex;
  flex-direction: column;
  margin: 0 16px; /* 两侧安全边距 */
}

.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--secondary-color, #764ba2) 100%);
  color: white;
}

.header-content h3 { font-size: 24px; font-weight: 700; margin: 0; }
.header-subtitle { font-size: 14px; opacity: 0.9; margin: 4px 0 0 0; }

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.close-btn:hover { background: rgba(255, 255, 255, 0.3); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.event-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: var(--border-radius);
  margin-bottom: 24px;
}

.event-image {
  position: relative;
  flex-shrink: 0;
}

.event-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.event-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}

.event-details h4 { margin: 0 0 8px 0; font-size: 18px; color: var(--text-primary); }

.event-meta { display: flex; flex-direction: column; gap: 4px; }

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.purchase-steps {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
}

.purchase-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--border-color);
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border-color, #e0e0e0);
  color: var(--text-secondary, #757575);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
}

.step.active .step-number { background: var(--primary-color, #667eea); color: #ffffff; }
.step.completed .step-number { background: var(--success-color, #4caf50); color: #ffffff; }

.section { margin-bottom: 32px; }

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.ticket-types, .seat-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.ticket-type, .seat-area {
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.ticket-type:hover, .seat-area:hover { border-color: var(--primary-color); box-shadow: var(--shadow-medium); }
.ticket-type.active, .seat-area.active { border-color: var(--primary-color); background: #f8f9ff; }
.ticket-type.unavailable, .seat-area.unavailable { opacity: 0.5; cursor: not-allowed; }

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ticket-name, .area-name { font-weight: 600; color: var(--text-primary); }

.ticket-price, .area-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #e91e63;
  font-weight: 700;
}

.price-symbol { font-size: 14px; }
.price-amount { font-size: 18px; }

.ticket-features { display: flex; gap: 8px; margin-bottom: 12px; }

.feature {
  background: #f0f4ff;
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.ticket-availability, .area-seats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}

.availability-bar {
  flex: 1;
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.availability-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  transition: width 0.3s;
}

.theater-layout { text-align: center; margin-bottom: 24px; }

.stage {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 12px;
  border-radius: var(--border-radius);
  margin-bottom: 24px;
  font-weight: 600;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: var(--border-radius);
  padding: 8px 16px;
}

.quantity-controls button {
  background: var(--primary-color, #667eea);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.quantity-controls button:hover { background: var(--secondary-color, #764ba2); }
.quantity-controls button:disabled { background: #ccc; cursor: not-allowed; }

.quantity-display {
  font-size: 18px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}

.quantity-note { font-size: 12px; color: var(--text-secondary, #6b7280); margin: 0; }

.order-summary {
  background: #f8f9ff;
  border-radius: var(--border-radius);
  padding: 24px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
}

.summary-item:last-child { border-bottom: none; }

.item-label { color: var(--text-secondary); }
.item-value { font-weight: 500; color: var(--text-primary); }

.summary-divider {
  height: 1px;
  background: var(--border-color);
  margin: 16px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.total-label { color: var(--text-primary); }
.total-amount { color: #e91e63; }

.modal-footer {
  padding: 24px 32px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.footer-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
  color: #ffffff;
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.btn-outline {
  background: #ffffff;
  color: var(--primary-color, #667eea);
  border: 2px solid var(--primary-color, #667eea);
}

.btn-outline:hover { background: var(--primary-color); color: white; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Global notification styles */
:global(.notification) {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow: var(--shadow-medium);
  z-index: 10000;
  font-size: 14px;
  font-weight: 500;
}

:global(.notification.success) { background: var(--success-color); color: white; }
:global(.notification.error) { background: var(--error-color); color: white; }

/* Responsive */
@media (max-width: 768px) {
  .modal-content { width: 98%; margin: 16px; }
  .modal-header, .modal-body, .modal-footer { padding: 16px 20px; }
  .event-card { flex-direction: column; text-align: center; }
  .ticket-types, .seat-areas { grid-template-columns: 1fr; }
  .footer-actions { flex-direction: column; }
}
</style>